<template>
  <div class="wrapper" ref="wrap">
    <ul>
      <router-link tag="li" :to="'/strictdetails/' + item.id" @click="$router.go(-1)"  class="item"  v-for="item of list"  :key="item.id">
        <div class="item-left"><img :src="item.imgUrl"></div>
        <div class="item-right">
          <h2>{{item.title}}&nbsp;
            <span v-for="Angle of item.Anglelist"
                  :class="Angle === '严选' ? 'Strict' : Angle === '在售' ? 'sale' : 'discontinued' ">{{Angle}}</span>
          </h2>
          <p class="subtitle">{{item.subtitle}}</p>
          <p class="spot">
            <span v-for="itemx of item.BrightSpot">{{itemx.x}}</span>
          </p>
          <p class="price">
            <span>{{item.PriceArea.price}}</span>
            <span class="priceFont">{{item.PriceArea.unit}}</span>
            <span class="model">{{item.PriceArea.area}}</span>
          </p>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>

  import BScroll from 'better-scroll'

  export default {
    name: 'XinFangList',
    props: {
      list: Array
    },
    data () {
      return {}
    },
    // 生命钩子，当页面挂载时执行
    mounted () {
      // 使用 better-scroll 页面滑动插件
      this.scroll = new BScroll(this.$refs.wrap)
    }
  }
</script>


<style scoped lang="stylus">
  @import "~styles/varibles.styl"

  .wrapper
    wrapper()
    overflow hidden
    position absolute
    top 2.8rem
    left 0
    right 0
    bottom 0


  .title
    title()

  .item
    width 100%
    box-sizing border-box
    border-bottom: .026667rem solid #f8f7f7
    display: flex
    align-items center
    padding: .2rem
    margin-bottom: .3rem
    background: #fff
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0, 0, 0, .04)
    border-radius: .1rem

  .item-left
    width: 2rem
    height: 1.8rem
    position: relative

  .item-left img
    border-radius .1rem
    width: 100%
    height: 100%

  .item-right
    flex: 1
    text-align: left
    padding-left: .346667rem
    position: relative

  .item-right
    color #ccc
    font-size 0.012rem

  .item-right h2
    font-size .3rem
    font-weight 500
    color black
    margin-bottom .1rem


  .item-right .Strict
    box-sizing border-box
    background #504f5e
    color #f1ddb5
    padding 0.04rem 0.08rem
    border-radius .05rem
    font-size .2rem
    margin 0 .05rem

  .item-right .sale
    box-sizing border-box
    background white
    color #a3c512
    padding 0.04rem 0.08rem
    border 0.02rem solid #a3c512
    border-radius .05rem
    font-size .2rem
    margin 0 .05rem

  .item-right .discontinued
    box-sizing border-box
    background white
    color #979ea8
    padding 0.04rem 0.08rem
    border 0.02rem solid #979ea8
    border-radius .05rem
    font-size .2rem
    margin 0 .05rem

  .item-right-subtitle
    padding-top .12rem

  .spot
    margin-top .3rem

  .item-right .price
    margin-top .25rem
    font-size .3rem

  .spot span
    background #f3f5f8
    color #9ba6aa
    margin-right .1rem
    padding .05rem .1rem
    border-radius .1rem

  .price span
    color #ff9100
    font-weight 800

  .price .model
    color #798089
    font-size .1rem
    font-weight 100

  .price .priceFont
    font-size .2rem


  .item-more
    button()

</style>
